<template>
  <u-popup class="form-region" v-model="showRegionSelect" mode="bottom" z-index="20000" width="100%" height="50vh"
    safe-area-inset-bottom @close="handleClose">
    <view class="regionSelectorContaine">
      <view class="u-flex u-row-between btn-group">
        <text class="cancel" @click="handleClose">取消</text>
        <text class="confirm" type="primary" size="medium" @click="handleRegionComfirm">保存</text>
      </view>
      <view class="city-content" style="height: 50vh">
        <scroll-view class="scroll-left-city" :scroll-top="scrollTopLeft" scroll-y="true">
          <view class="left-city">
            <view class="left-city-item" v-for="(item, index) in regionList" :key="index"
              @click="clickLeftItem(item, index)">
              <view :class="[
                'normal-city-title',
                { activeLeftTitle: leftSelectIndex === index },
              ]">{{ item.label }}</view>
            </view>
          </view>
        </scroll-view>
        <scroll-view class="scroll-right-city" scroll-y="true">
          <view class="right-city">
            <view class="right-city-item" v-for="(subItem, subIndex) in regionSubList" :key="subIndex"
              @click="clickRightItem(subItem, subIndex)">
              <view :class="[
                'normal-city-title',
                { activeRightTitle: rightSelectIndex === subIndex },
              ]">
                {{ subItem.label }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </u-popup>
</template>

<script>
import { getRegionTreeList } from "@/api/modules/career";
export default {
  props: {
    showRegionSelect: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      regionList: [],
      regionSubList: [],
      scrollTopLeft: "",
      leftSelectIndex: 0,
      rightSelectIndex: "",
      selectedRightItem: {},
    };
  },
  created() {
    console.log('筛选城市组件启动');
    this.getCityRegionTreeList();
  },
  methods: {
    getCityRegionTreeList() {
      getRegionTreeList()
        .then((res) => {
          if (res.code == 200) {
            this.regionList = res.data;
            (this.regionSubList = this.regionList[0].children),
              console.log(
                "-----getRegionTreeList---->",
                this.regionList,
                this.regionSubList
              );
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .catch((err) => { });
    },
    handleClose(item) {
      this.$emit("update:showRegionSelect", false);
    },
    clickLeftItem(item, index) {
      this.regionSubList = item.children;
      this.leftSelectIndex = index;
      this.rightSelectIndex = -1; //选择左边，右边清空选择
      this.scrollTopLeft = index * 50;
    },
    clickRightItem(subItem, subIndex) {
      this.regionShow = false;
      this.rightSelectIndex = subIndex;
      this.selectedRightItem = subItem;
    },
    handleRegionComfirm() {
      this.$emit("regionChange", this.selectedRightItem);
      this.leftSelectIndex = "";
      this.rightSelectIndex = "";
      this.scrollTopLeft = 0;
      this.selectedRightItem = {};
      this.handleClose();
    },
  },
};
</script>

<style lang="scss" scoped>
.regionSelectorContaine {
  z-index: 20000;
}

.btn-group {
  padding: 0 24rpx;
  line-height: 102rpx;

  .cancel,
  .confirm {
    padding: 0 16rpx;
  }
}

.city-content {
  display: flex;
  padding: 32rpx 0rpx;

  .scroll-right-city {
    width: 60%;
    flex-grow: 1;

    max-height: 100%;
    overflow: auto;
  }

  .scroll-left-city {
    width: 40%;
    flex-shrink: 0;

    max-height: 100%;
    overflow: auto;
    background: #f7f8fa;
  }
}

.left-city {
  display: block;
  padding: 20rpx 0rpx 0rpx 32rpx;
  // width: 40%;
  // height: 300rpx;
}

.right-city {
  display: block;
  padding: 20rpx 0rpx 0rpx 32rpx;
  // width: 60%;
  // height: 300rpx;
}

.normal-city-title {
  padding-left: 32rpx;
  font-size: 32rpx;
  font-weight: 400;
  color: #555;
  height: 50px;
  line-height: 50px;
}

.activeLeftTitle {
  padding-left: 32rpx;
  font-size: 32rpx;
  font-weight: 500;
  height: 50px;
  line-height: 50px;
  background-color: #ffffff;
  border-radius: 16rpx 0rpx 0rpx 16rpx;
}

.activeRightTitle {
  padding-left: 32rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #f75a3e;
  height: 50px;
  line-height: 50px;
  // background-color: #e5e5e5;
  // border-radius: 16rpx 0rpx 0rpx 16rpx;
}</style>